<template>
    <div id="search">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="title">
                <form action="/">
                    <van-search
                        v-model.trim="words"
                        show-action
                        placeholder="商品搜索"
                        @focus="inputFocus"
                        @input="tipsearch"
                        @cancel="onCancel"
                    />
                </form>
            </div>
            <div class="searchTips" v-if="words">
                <div
                    @click="searchWords(item.name)"
                    v-for="(item,index) in tipsData"
                    :key="index"
                >{{item.name}}</div>
                <div class="noGoods" v-if="tipsData.length == 0">数据库暂无此类商品...</div>
            </div>
            <div class="history">
                <div class="h-title">
                    <div>历史记录</div>
                    <div @click="clearHistory"></div>
                </div>
                <div class="h-content">
                    <div
                        class="h-item"
                        v-for="(item,index) in historyData"
                        :key="index"
                        @click="searchWords(item.keyword)"
                    >{{item.keyword}}</div>
                </div>
            </div>
            <!-- 热门搜索 -->
            <div class="hotsearch">
                <div class="hot-title">
                    <div>热门搜索</div>
                </div>
                <div class="hot-content">
                    <div
                        class="hot-item"
                        v-for="(item,index) in hotData"
                        :key="index"
                        :class="[0==index?'active':'']"
                        @click="searchWords(item.keyword)"
                    >{{item.keyword}}</div>
                </div>
            </div>
            <!-- 当通过关键词搜索出信息时,点击,展示商品信息 -->
            <div class="goodsList" v-if="listData.length != 0">
                <div class="sortnav">
                    <div @click="changeTab(1)" :class="[1==currentIndex?'active':'']">综合</div>
                    <div
                        @click="changeTab(2)"
                        :class="[2==currentIndex?'active':'',order == 'desc'?'desc':'asc']"
                    >价格</div>
                    <div @click="changeTab(3)" :class="[3==currentIndex?'active':'']">分类</div>
                </div>
                <div class="sortlist">
                    <router-link
                        tag="div"
                        class="item"
                        :to="`/pages/goods?id=${item.id}`"
                        v-for="(item,index) in listData"
                        :key="index"
                    >
                        <img :src="item.list_pic_url" alt />
                        <p class="name">{{item.name}}</p>
                        <p class="price">￥{{item.retail_price}}</p>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    clearhistoryAction,
    addhistoryaction,
    helperaction,
    indexaction,
} from "@/api/search";
import { Toast } from "vant";
export default {
    data() {
        return {
            words: "",
            keyword: "",
            order: "",
            listData: [],
            tipsData: [],
            openId: "",
            historyData: [],
            currentIndex: 0,
            hotData: [],
        };
    },
    mounted() {
        this.openId = localStorage.getItem("openId");
        this.getHistoyData();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onCancel() {
            this.$router.go(-1);
        },
        inputFocus() {
            //先清空商品列表
            this.listData = [];
            //展示搜索出的信息
            if (this.words == "") {
                return;
            }
            this.tipsearch();
        },
        //获取搜索提示 商品列表
        async getlistData() {
            const data = await helperaction({
                keyword: this.keyword,
                order: this.order,
            });
            console.log(data, "listData");
            this.listData = data.keywords;
            console.log(this.listData);
            this.tipsData = [];
            console.log(this.tipsData);
        },
        //将关键词添加到数据库
        async searchWords(val) {
            this.keyword = val;
            const data = await addhistoryaction({
                keyword: val,
                openId: this.openId,
            });
            console.log(data, "关键词数据库");
            this.getHistoyData();
            this.getlistData();
        },
        //通过关键词 展示搜索信息
        async tipsearch(el) {
            const data = await helperaction({
                keyword: this.words,
            });
            console.log(data, "搜索出的信息");
            this.tipsData = data.keywords;
        },
        //清除历史记录
        async clearHistory() {
            const data = await clearhistoryAction({
                openId: this.openId,
            });
            console.log(data, "清除历史记录");
            if (data) {
                this.historyData = [];
            }
        },
        //获取历史几记录
        async getHistoyData() {
            const data = await indexaction({
                openId: this.openId,
            });
            console.log(data, "获取历史记录");
            this.hotData = data.hotKeywordList;
            console.log(this.hotData, "hotData");
            this.historyData = data.historyData;
            console.log(this.historyData, "historyData");
        },
        changeTab(index) {
            console.log(index);
            this.currentIndex = index;
            if (index == 2) {
                this.order = this.order == "asc" ? "desc" : "asc";
            } else {
                this.order = "";
            }
            this.getlistData();
        },
    },
};
</script>
<style lang="scss" scoped>
#search {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        height: 13.333333rem;
    }
    .searchTips {
        position: absolute;
        width: 100%;
        top: 2.666667rem;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 0 0.42667rem;
        z-index: 9;
        background: #fff;
        overflow-y: scroll;
        div {
            padding: 0.26667rem 0;
            text-align: left;
        }
        .noGoods {
            text-align: center;
            margin-top: 4rem;
        }
    }
    .goodsList {
        position: absolute;
        width: 100%;
        top: 2.666667rem;
        left: 0;
        bottom: 0;
        background: #fff;
        box-sizing: border-box;
        z-index: 9;
        overflow-y: scroll;
        .sortnav {
            display: flex;
            background: #fff;
            width: 100%;
            height: 1.04rem;
            line-height: 1.04rem;
            div {
                width: 3.33333rem;
                height: 100%;
                text-align: center;
            }
            :nth-child(2) {
                background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png)
                    2.2rem no-repeat;
                background-size: 0.2rem 0.28rem;
            }
            .active {
                color: #b4282d;
            }
            .active.asc {
                background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png)
                    2.2rem no-repeat;
                background-size: 0.2rem 0.28rem;
            }
            .active.desc {
                background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png)
                    2.2rem no-repeat;
                background-size: 0.2rem 0.28rem;
            }
        }
        .sortlist {
            margin-top: 0.26667rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item {
                width: 4.96667rem;
                margin-bottom: 0.06667rem;
                text-align: center;
                background: #fff;
                padding: 0.2rem 0;
                img {
                    display: block;
                    width: 4.02667rem;
                    height: 4.02667rem;
                    margin: 0 auto;
                }
                .name {
                    margin: 0.2rem 0 0.29333rem 0;
                    text-align: center;
                    padding: 0 0.26667rem;
                    font-size: 0.32rem;
                }
                .price {
                    text-align: center;
                    font-size: 0.4rem;
                    color: #b4282d;
                }
            }
        }
    }
    .history {
        background: #fff;
        padding: 0.42667rem;
        .h-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.4rem;
            :nth-child(2) {
                width: 0.53333rem;
                height: 0.53333rem;
                background: url("../../../assets/images/del-address.png")
                    no-repeat;
                background-size: 100% 100%;
            }
        }
        .h-content {
            display: flex;
            flex-wrap: wrap;
            .h-item {
                padding: 0.13333rem 0.13333rem;
                border: 0.01333rem solid #999;
                margin: 0 0.4rem 0.26667rem 0;
            }
        }
    }
    .hotsearch {
        background: #fff;
        padding: 0.42667rem;
        margin-top: 0.26667rem;
        .hot-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.4rem;
        }
        .hot-content {
            display: flex;
            flex-wrap: wrap;
            .hot-item {
                padding: 0.13333rem 0.13333rem;
                margin: 0 0.4rem 0.26667rem 0;
                border: 0.01333rem solid #999;
            }
            .active {
                border: 0.01333rem solid #b4282d;
                color: #b4282d;
            }
        }
    }
}
</style>